import React, { useRef, useState } from 'react';
import './index.css';
import Cai from './zujian/cai';
import Remen from './zujian/remen';
import Xihuan from './zujian/xihuan';
import { Button, Swiper, Toast, Sticky, Card, CountDown } from 'react-vant';
import { AppsO, Search } from '@react-vant/icons';
import { history } from 'umi';

const imgslist = [
  { id: 1, img: '1.png' },
  { id: 2, img: '2.png' },
  { id: 3, img: '1.png' },
  { id: 4, img: '2.png' },
];

// 去商品分类
const gocategory = () => {
  window.location.href = '/category';
};

// 去限时兑换
const golimittime = () => {
  // 处理按钮点击事件，修改页面URL进行跳转并触发刷新
  window.location.href = '/limittime';
};

// 去搜索页面
const gosearch = () => {
  window.location.href = '/search';
};

export default function index() {
  const [shijian, setshijian] = useState(10);

  // 计时器

  // const [time, setTime] = useState({
  //   hours: 13,
  //   minutes: 56,
  //   seconds: 8
  // });

  // useEffect(() => {
  //   if (time.seconds > 0) {
  //     const timerId = setInterval(() => {
  //       setTime(prevTime => {
  //         let seconds = prevTime.seconds - 1;
  //         if (seconds < 0) {
  //           seconds = 59;
  //           let minutes = prevTime.minutes - 1;
  //           if (minutes < 0) {
  //             minutes = 59;
  //             let hours = prevTime.hours - 1;
  //             return { hours, minutes, seconds };
  //           } else {
  //             return { ...prevTime, minutes, seconds };
  //           }
  //         } else {
  //           return { ...prevTime, seconds };
  //         }
  //       });
  //     }, 1000);

  //     return () => clearInterval(timerId);
  //   }
  // }, []);

  const fenlei = () => {
    // history.push('/category')
    history.push('/cart');
  };

  return (
    <div className="shoubody">
      <div className="duishou">
        <Sticky>
          <div className="firse">
            <div className="biao">
              <h1>兑换商城</h1>
            </div>
            <div className="biao1">
              <AppsO fontSize={30} onClick={fenlei} />
            </div>
            <div className="biao1">
              <Search fontSize={30} onClick={() => gosearch()} />
            </div>
          </div>
        </Sticky>
      </div>

      <div className="demo-swiper">
        <Swiper slideSize={106} trackOffset={110} autoplay={10000}>
          {imgslist.map((item) => (
            <Swiper.Item key={item.id}>
              {item.img === '1.png' ? (
                <div
                  className="imgrun"
                  style={{
                    background: 'rgb(11, 115, 214)',
                    width: '86%',
                    height: '120px',
                    borderRadius: '15px',
                  }}
                >
                  <img
                    src={require('../public/imgs/' + item.img)}
                    alt=""
                    style={{
                      width: '106%',
                      height: '80px',
                      position: 'relative',
                      bottom: '-50px',
                      left: '-10px',
                      right: '-10px',
                      borderRadius: '15px',
                    }}
                  />

                  <div
                    style={{
                      position: 'relative',
                      top: '-60px',
                      paddingLeft: '40px',
                    }}
                  >
                    <h1
                      style={{
                        color: '#fff',
                        fontWeight: 'bold',
                        display: 'inline-block',
                        verticalAlign: 'middle',
                      }}
                    >
                      用垃圾
                      <br />
                      <span style={{ paddingLeft: '40px' }}>兑换礼品</span>
                    </h1>
                    <img
                      src={require('../public/imgs/3.png')}
                      alt=""
                      style={{ display: 'inline-block', marginLeft: '60px' }}
                    />
                  </div>
                </div>
              ) : (
                <div
                  className="imgrun"
                  style={{
                    background: 'rgb(255, 110, 143)',
                    width: '86%',
                    height: '120px',
                    borderRadius: '10px',
                  }}
                >
                  <img
                    src={require('../public/imgs/' + item.img)}
                    alt=""
                    style={{
                      width: '106%',
                      height: '80px',
                      position: 'relative',
                      bottom: '-50px',
                      left: '-10px',
                      right: '-10px',
                      borderRadius: '10px',
                    }}
                  />
                  <div
                    style={{
                      position: 'relative',
                      top: '-60px',
                      paddingLeft: '40px',
                    }}
                  >
                    <h1
                      style={{
                        color: '#fff',
                        fontWeight: 'bold',
                        display: 'inline-block',
                        verticalAlign: 'middle',
                      }}
                    >
                      商城上新
                      <br />
                      <span style={{ paddingLeft: '40px' }}>速戳抢兑</span>
                    </h1>
                    <img
                      src={require('../public/imgs/4.png')}
                      alt=""
                      style={{ display: 'inline-block', marginLeft: '60px' }}
                    />
                  </div>
                </div>
              )}
            </Swiper.Item>
          ))}
        </Swiper>
      </div>
      <div className="fen">
        <Card.Header className="content">
          <div className="kaitou">
            <p className="xianshi">限时兑换</p>
            <div className="shijian">
              <CountDown time={30 * 60 * 60 * 1000} />
              {/* <span>{time.hours}</span>:<span>{time.minutes}</span>:<span>{time.seconds}</span> */}
            </div>
            <p className="geng" onClick={() => golimittime()}>
              更多
            </p>
          </div>

          <div className="zujian">
            <Cai />
          </div>
        </Card.Header>

        <Card.Header className="content1">
          <div className="kaitou">
            <p className="xianshi1">近期热门</p>
            <p className="geng1">更多</p>
          </div>

          <div className="zujian2">
            <Remen />
          </div>
        </Card.Header>

        <Card round className="content2" style={{ height: '100%' }}>
          <Card.Header>
            <div>
              <p className="xianshi2">猜你喜欢</p>
            </div>
          </Card.Header>

          <Card.Body style={{ height: '100%' }}>
            <div style={{ width: '100%' }}>
              <Xihuan />
            </div>
          </Card.Body>
        </Card>
      </div>
    </div>
  );
}
